<template>
  <!-- 千倍合约-详情 -->
  <el-dialog v-if="props.show" :modelValue="props.show" custom-class="detailData" :title="selectToLabel(indexStore.gameArray, props.checkedItem.game_id)+' 详情'" :close-on-click-modal="false"
    top="8vh" :close-on-press-escape="false" :destroy-on-close="true" @close="onHideDetails">
    <div v-loading="indexStore.moduleLoading" class="border-box">
      <template v-for="(item,index) in data.filArr" :key="index">
        <div class="flex list" v-if="item.show" >
          <div class="width20"> {{ item.label }} </div>
          <span v-if="item.key=='game_id'">
            <GameHeaderInfo class="marginB5" :game_id="props.checkedItem.game_id" />
          </span>
          <span v-else-if="item.key=='is_buy'|| item.key=='exit_type'">
            <el-tag type="primary">{{ item.value }}</el-tag>
          </span>
          <span v-else>{{ item.value  }}</span>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { setTimestampTime } from '@/utils/time'
import { BigWan, BigHundred } from '@/utils/math'
import { selectToLabel } from '@/utils/index'
import { getGameDetails } from '@/api/player'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  filArr: [] as any[],
  buyList:[
    { label: '买涨', value: true },
    { label: '买跌', value: false },
  ],
  controlsList:[
    { label: '提现', value: 1 },
    { label: '爆仓', value: 2 },
    { label: '自动提现', value: 3 },
    { label: '资金费率不够，强制平仓', value: 4 },
  ],
  feeList:[
    { label: 'PnL Fee', value: 1 },
    { label: 'Flat Fee', value: 2 },
  ],
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0] && value[1]) {
      gameDetails()
    }
  },
)

// 详情
const gameDetails = async() => {
  indexStore.setModuleLoading(true)
  let dataRes = await getGameDetails({
    uuid:props.checkedItem.uuid_str,
    uid:props.checkedItem.uid,
    agent_id:props.checkedItem.agent_id,
  })
  let res = JSON.parse(dataRes.data.log_json)
  console.log('百人场(千倍合约)详情',res);
  data.filArr = [
    { label: '游戏', value: selectToLabel(indexStore.gameArray, props.checkedItem.game_id), key: 'game_id', show:true },
    { label: '牌局编号', value: props.checkedItem.round_id_str, key: 'round_id_str', show:true },
    { label: '订单下注时间', value: setTimestampTime(res.buy_ts), key: 'buy_ts', show:true },
    { label: '订单关闭时间', value: setTimestampTime(res.exit_ts), key: 'exit_ts', show:true },
    { label: '币种', value: res.instrument, key: 'instrument', show:true },
    { label: '购买类型', value: selectToLabel(data.buyList, res.is_buy), key: 'is_buy', show:true },
    { label: '操作类型', value: selectToLabel(data.controlsList, res.exit_type), key: 'exit_type', show:true },
    { label: '买入时币种价格', value: res.buy_price, key: 'buy_price', show:true },
    { label: '退出价格', value: res.exit_price, key: 'exit_price', show:true },
    { label: '止赢止损设定价格', value: res.auto_stop_win+'/'+res.auto_stop_loss, key: 'auto_stop_win', show:true },
    { label: selectToLabel(data.feeList, res.fee_type)+'手续费', value: res.fee, key: 'fee', show:true },
    { label: '资金费率', value: res.money_fee, key: 'money_fee', show:true },
    { label: '订单下注额', value: BigWan(res.bet), key: 'bet', show:true },
    { label: '杠杆倍数', value: BigHundred(res.multiplier), key: 'multiplier', show:true },
    { label: '盈利率ROL', value: (res.exit_type ==2 ? BigHundred(res.roi):res.roi)+'%', key: 'roi', show:true },
    { label: '结果P&L', value: res.pl, key: 'pl', show:true },
  ]
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}
</style>